<template>
  <div class="MainPage">
    <div class="ele-title">
      <div class="title-left">
        <p>运行数据统计</p>
        <p>数据更新时间:2020-50-10 14:03:09</p>
      </div>
      <div class="title-right">
        <el-radio-group v-model="radio3" size="small">
          <el-radio-button label="日" />
          <el-radio-button label="周" />
          <el-radio-button label="月" />
        </el-radio-group>
        <el-date-picker v-model="keyValue.date" type="date" size="small" />
      </div>
    </div>
    <div class="ele-panel">
      <!-- 日下单用户 -->
      <div class="rxdyh">
        <p class="top"><span>122.2</span><span>1200人</span></p>
        <p class="moddile">
          <span><i class="iconfont icon-settingshangsheng" />日环比上升</span><span>日下单用户</span>
        </p>
        <div class="bottom">
          <span>查看更多>></span>
          <el-button circle plain size="mini" icon="el-icon-arrow-right" />
        </div>
      </div>
      <!-- 日订单量 -->
      <div class="ridl">
        <p class="top"><span>122.2</span><span>1200人</span></p>
        <p class="moddile">
          <span><i class="iconfont icon-settingxiajiang" />日环比下降</span><span>日订单量</span>
        </p>
        <div class="bottom">
          <span>查看更多>></span>
          <el-button circle plain size="mini" icon="el-icon-arrow-right" />
        </div>
      </div>
      <!-- 销售订单总数 -->
      <div class="xsddzs">
        <p class="top"><span>122.2</span><span>1200人</span></p>
        <p class="moddile">
          <span><i class="iconfont icon-settingshangsheng" />日环比上升</span><span>销售订单总数</span>
        </p>
        <div class="bottom">
          <span>查看更多>></span>
          <el-button circle plain size="mini" icon="el-icon-arrow-right" />
        </div>
      </div>
      <!-- 用户总数量 -->
      <div class="yhzsl">
        <p class="top"><span>122.2</span><span>1200人</span></p>
        <p class="moddile">
          <span><i class="iconfont icon-settingshangsheng" />日环比上升</span><span>用户总数量</span>
        </p>
        <div class="bottom">
          <span>查看更多>></span>
          <el-button circle plain size="mini" icon="el-icon-arrow-right" />
        </div>
      </div>
    </div>
    <div class="ele-pvuv">
      <div class="pvuv">
        <p class="uv-a-0">
          <span>每日PV量</span><i class="iconfont icon-settingshuju" />
        </p>
        <p class="uv-b">2345</p>
        <div class="uv-c" />
        <p class="uv-d">访问量，即页面浏览量点击量</p>
      </div>
      <div class="pvuv">
        <p class="uv-a-1">
          <span>每日PV量</span><i class="iconfont icon-settingshuju" />
        </p>
        <p class="uv-b">2222</p>
        <div class="uv-c" />
        <p class="uv-d">访问量，即页面浏览量点击量</p>
      </div>
      <div class="pvuv">
        <p class="uv-a-2">
          <span>日活转化率</span><i class="iconfont icon-settingshuju" />
        </p>
        <p class="uv-b">22%</p>
        <div class="uv-c">
          <el-progress
            :text-inside="false"
            :stroke-width="15"
            :percentage="70"
          />
        </div>
        <div class="uv-d">
          <p>
            <span>日活率</span>
            <i class="el-icon-caret-top" />
            <span>10%</span>
          </p>
          <p>
            <span>日活率</span>
            <i class="el-icon-caret-bottom" />
            <span>10%</span>
          </p>
        </div>
      </div>
      <div class="pvuv">
        <p class="uv-a-2">
          <span>用户活跃率</span><i class="iconfont icon-settingshuju" />
        </p>
        <p class="uv-b">22%</p>
        <div class="uv-c pv-c">
          <el-progress
            type="circle"
            :percentage="25"
            :stroke-width="25"
            status="success"
          />
        </div>
        <p class="uv-d">用户基数:2345万人</p>
      </div>
    </div>
    <div class="ele-chart">
      <div class="chart-left">
        <div class="targget">
          <div class="left">
            <el-select v-model="valuekey">
              <el-option value="1" label="订单量" />
            </el-select>
          </div>
          <div class="right">
            <el-button plain circle icon="el-icon-refresh" />
            <el-radio-group v-model="radio3" size="small">
              <el-radio-button label="日" />
              <el-radio-button label="周" />
              <el-radio-button label="月" />
            </el-radio-group>
            <el-date-picker v-model="keyValue.date" type="date" size="small" />
          </div>
        </div>
        <div class="ele-echart">
          <div id="echarta" ref="echarta" style="width:100%;height:400px" />
          <div
            id="echartb"
            ref="echartb"
            style="margin-top:50px;height:400px"
          />
        </div>
      </div>
      <div class="chart-right">
        <div class="ele-keytes">
          <span><i
            class="iconfont icon-settingshangsheng"
          />全国门店订单量Top</span>
          <el-radio-group v-model="radio3" size="small">
            <el-radio-button label="日" />
            <el-radio-button label="周" />
            <el-radio-button label="月" />
          </el-radio-group>
        </div>
        <el-table :data="Bindata" :row-class-name="RowClassName">
          <el-table-column label="排名" prop="test">
            <template slot-scope="scope">
              <span v-if="scope.row.id == 1" class="Top1">1</span>
              <span v-else-if="scope.row.id == 2" class="Top2">2</span>
              <span v-else-if="scope.row.id == 3" class="Top3">3</span>
              <span v-else class="Topmod">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="门店" prop="test" />
          <el-table-column label="订单量" prop="test" />
        </el-table>
        <div class="ele-funnel">
          <div class="ele-keytes">
            <span><i
              class="iconfont icon-settingshangsheng"
            />全国门店订单量Top</span>
          </div>
          <div
            id="echartc"
            ref="echartc"
            style="margin-top:50px;height:400px"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/** 运营数据 */
export default {
  name: 'MainPage',
  data() {
    return {
      radio3: '',
      keyValue: {
        date: ''
      },
      valuekey: '1',
      Bindata: [
        { test: 'Bindata', id: 1 },
        { test: 'Bindata', id: 2 },
        { test: 'Bindata', id: 3 },
        { test: 'Bindata', id: 4 },
        { test: 'Bindata', id: 5 },
        { test: 'Bindata', id: 6 }
      ]
    }
  },
  mounted() {
    this.keyValue.date = new Date()
    this.barChart()
    this.pieChart()
    this.funnelChart()
  },
  methods: {
    RowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return 'backColor'
      }
    },
    barChart() {
      const div_echarts = this.$refs.echarta
      if (div_echarts) {
        const myChart = this.$echarts.init(div_echarts)
        myChart.setOption({
          color: ['yellow', 'orange'],
          barWidth: 20,
          title: {
            text: '',
            show: false
          },
          show: true,
          tooltip: {},
          legend: {
            top: 10,
            right: 0,
            data: ['订单量', '用户量']
          },
          xAxis: {
            axisLine: {
              lineStyle: {}
            },
            data: [
              '11-27',
              '11-28',
              '11-29',
              '11-30',
              '11-31',
              '12-01',
              '12-02'
            ]
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                winth: 0
              }
            }
          },
          series: [
            {
              name: '订单量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20, 99]
            },
            {
              name: '用户量',
              type: 'bar',
              data: [10, 44, 66, 88, 10, 100, 12]
            }
          ]
        })
      }
    },
    pieChart() {
      const div_echarts = this.$refs.echartb
      if (div_echarts) {
        const myChart = this.$echarts.init(div_echarts)
        myChart.setOption({
          title: {},
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              data: [
                { value: 1048, name: '租赁订单' },
                { value: 735, name: '营销订单' },
                { value: 580, name: '服务订单' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    },
    funnelChart() {
      const div_echarts = this.$refs.echartc
      if (div_echarts) {
        const myChart = this.$echarts.init(div_echarts)
        myChart.setOption({
          title: {},
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: true },
              restore: {},
              saveAsImage: {}
            }
          },
          legend: {
            data: ['轮椅', '手拐', '肘拐', '腋拐']
          },
          series: [
            {
              name: '订单量',
              type: 'funnel',
              label: {
                show: true,
                position: 'right'
              },
              labelLine: {
                length: 20,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                label: {
                  position: 'inside'
                }
              },
              data: [
                { value: 100, name: '轮椅' },
                { value: 60, name: '手拐' },
                { value: 40, name: '肘拐' },
                { value: 20, name: '腋拐' }
              ]
            }
          ]
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.MainPage {
  padding: 20px;
  .ele-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-left {
      p:first-child {
        border-left: 5px solid rgb(0, 102, 255);
        padding-left: 10px;
        font-weight: 500;
      }
      p:last-child {
        font-size: 12px;
        color: gray;
        padding-left: 15px;
      }
    }
  }
  .ele-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .rxdyh,
    .ridl,
    .xsddzs,
    .yhzsl {
      border: 1px solid;
      width: 300px;
      margin: 0 auto;
      border-radius: 10px;
      color: white;
      overflow: hidden;
    }
    .rxdyh {
      background: #33cccc;
      .top,
      .moddile,
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
      }
      .top {
        span:first-child {
          background: #79ffff;
          padding: 3px;
        }
        span:last-child {
          font-weight: bold;
        }
      }
      .moddile,
      .bottom {
        span {
          font-size: 0.9rem;
        }
      }
      .bottom {
        padding: 5px 10px;
        background: #25a7a7;
        ::v-deep.el-button {
          padding: 4px;
          background: none;
        }
      }
    }
    .ridl {
      background: #0086b3;
      .top,
      .moddile,
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
      }
      .top {
        span:first-child {
          background: #6dd3f5;
          padding: 3px;
        }
        span:last-child {
          font-weight: bold;
        }
      }
      .moddile,
      .bottom {
        span {
          font-size: 0.9rem;
        }
      }
      .bottom {
        padding: 5px 10px;
        background: #0079a1;
        ::v-deep.el-button {
          padding: 4px;
          background: none;
        }
      }
    }
    .xsddzs {
      background: #ff9999;
      .top,
      .moddile,
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
      }
      .top {
        span:first-child {
          background: #ffcece;
          padding: 3px;
        }
        span:last-child {
          font-weight: bold;
        }
      }
      .moddile,
      .bottom {
        span {
          font-size: 0.9rem;
        }
      }
      .bottom {
        padding: 5px 10px;
        background: #d67f7f;
        ::v-deep.el-button {
          padding: 4px;
          background: none;
        }
      }
    }
    .yhzsl {
      background: #80007f;
      .top,
      .moddile,
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
      }
      .top {
        span:first-child {
          background: #e29bd3;
          padding: 3px;
        }
        span:last-child {
          font-weight: bold;
        }
      }
      .moddile,
      .bottom {
        span {
          font-size: 0.9rem;
        }
      }
      .bottom {
        padding: 5px 10px;
        background: #720172;
        ::v-deep.el-button {
          padding: 4px;
          background: none;
        }
      }
    }
  }
  .ele-pvuv {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
    .pvuv {
      height: 155px;
      background: #f8f8f8;
      padding-top: 10px;
      width: 380px;
      padding: 0px 20px;
      margin: 0 auto;
      margin-bottom: 20px;
      .uv-a-0,
      .uv-a-1,
      .uv-a-2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span:first-child {
          color: #005cb3;
        }
        i {
          color: #c6d2da;
        }
      }
      .uv-a-1 {
        span:first-child {
          color: #33eb86;
        }
      }
      .uv-a-2 {
        span:first-child {
          color: gray;
        }
      }
      .uv-b {
        font-size: 1.8rem;
        margin: 0;
        font-weight: bold;
      }
      .uv-c {
        height: 40px;
        border-bottom: 1px solid #e6e6e6;
        ::v-deep.el-progress {
          transform: translateY(50%);
          .el-progress__text {
            display: none;
          }
        }
      }
      .pv-c {
        position: relative;
        ::v-deep.el-progress {
          position: absolute;
          top: 0;
          right: 0;
          transform: translateY(-30%);
          background: #f8f8f8;
          .el-progress-circle {
            width: 90px !important;
            height: 90px !important;
          }
          .el-progress__text {
            display: none;
          }
        }
      }
      .uv-d {
        color: gray;
        margin: 8px 0px;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
        p {
          margin: 0;
        }
        p:first-child {
          i {
            color: orange;
          }
        }
        p:last-child {
          i {
            color: rgb(40, 194, 53);
          }
        }
      }
    }
  }
  .ele-chart {
    background: #dde3e6;
    display: flex;
    padding: 10px 0px 0px 0px;
    .chart-left,
    .chart-right {
      background: white;
      padding: 20px;
    }
    .chart-left {
      flex-grow: 1;
      margin-right: 10px;
      .targget {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .left {
          ::v-deep.el-select {
            width: 100px;
            .el-input__inner {
              border: none;
            }
          }
        }
        .right {
          width: 400px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          ::v-deep.el-button {
            background: none;
            border: none;
          }
        }
      }
      .ele-echart {
        width: 100%;
        padding-top: 20px;
        border-top: 1px solid #e6e6e6;
      }
    }
    .chart-right {
      width: 600px;
      .ele-keytes {
        .icon-settingshangsheng {
          font-size: 1.8rem;
        }
        span {
          font-weight: bold;
          font-size: 1.5rem;
        }
        padding-bottom: 20px;
        border-bottom: 2px solid #c5c5c5;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      ::v-deep.el-table {
        .backColor {
          background: #f2fdfd;
        }

        .Top1,
        .Top2,
        .Top3,
        .Topmod {
          display: inline-block;
          width: 20px;
          height: 20px;
          text-align: center;
          border-radius: 20px;
          color: white;
        }
        .Top1 {
          background: red;
        }
        .Top2 {
          background: orange;
        }
        .Top3 {
          background: green;
        }
        .Topmod {
          background: #cceeee;
        }
      }
      .ele-funnel {
        margin-top: 40px;
        .icon-settingshangsheng {
          font-size: 1.6rem;
        }
        .ele-keytes {
          span {
            font-weight: bold;
            font-size: 1.2rem;
          }
        }
      }
    }
  }
}
</style>
